<template>
	<view>
		<view class="list">
			<view class="item" v-for="(item,i) in list" :key="i" @click="checkboxChange(i,item)">
				<view>
					<image v-if="item.checked" class="icon-40" src="@/static/checked-2.png" mode=""></image>
					<image v-else class="icon-40" src="@/static/check-2.png" mode=""></image>
				</view>
				<view class="flex-1 pl-30">
					<view class="title">
						乘车人
					</view>
					<view class="name mt-14 mb-10">
						{{item.name}} <text class="mobile">{{item.mobile}}</text>
					</view>
					<view class="name">
						{{item.id_num | idNum}}
					</view>
				</view>
				<view class="action">
					<view class="flex" @click.stop="editHandle(item)">
						<u-icon name="edit-pen" color="#fff" size="30"></u-icon>
						<text>编辑</text>
					</view>
					<view class="flex mt-20" @click.stop="del(item.id)">
						<u-icon name="trash" color="#fff" size="30"></u-icon>
						<text>删除</text>
					</view>
				</view>
			</view>
			<view class="btn" @click="addInputShow = true">
				+添加
			</view>
		</view>
		<block v-if="addInputShow">
			<view class="input-group">
				<view class="cell">
					<view class="title">
						姓名
					</view>
					<u-input v-model="name" placeholder="请输入乘车人姓名" inputAlign="right"></u-input>
				</view>
				<view class="cell">
					<view class="title">
						身份证号
					</view>
					<u-input v-model="id_num" placeholder="请输入乘车人身份证号" inputAlign="right"></u-input>
				</view>
				<view class="cell">
					<view class="title">
						联系方式
					</view>
					<u-input v-model="mobile" type="number" maxlength="11" placeholder="请输入乘车人联系方式" inputAlign="right"></u-input>
				</view>
			</view>
			<view class="n-btn-primary" @click="addPassenger">
				保存
			</view>
		</block>
		<view class="mt-90">
			<view class="n-btn-primary" @click="pickerUser">确认乘客</view>
		</view>
		<u-popup v-model="editShow" borderRadius="20" mode="bottom" :closeable="true">
			<view class="edit-popup">
				<view class="title-1">
					编辑乘车人
				</view>
				<view class="input-group">
					<view class="cell">
						<view class="title">
							姓名
						</view>
						<u-input v-model="e_name" placeholder="请输入乘车人姓名" inputAlign="right"></u-input>
					</view>
					<view class="cell">
						<view class="title">
							身份证号
						</view>
						<u-input v-model="e_id_num" placeholder="请输入乘车人身份证号" inputAlign="right"></u-input>
					</view>
					<view class="cell">
						<view class="title">
							联系方式
						</view>
						<u-input v-model="e_mobile" type="number" maxlength="11" placeholder="请输入乘车人联系方式" inputAlign="right"></u-input>
					</view>
				</view>
				<view class="n-btn-primary" @click="edit">
					确认修改
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addInputShow:false,
				list:[],
				name:'',
				mobile:'',
				id_num:'',
				editShow:false,
				e_id:'',
				e_name:'',
				e_mobile:'',
				e_id_num:'',
			};
		},
		onLoad() {
			this.getList()
		},
		methods:{
			checkboxChange(i,item){
				item.checked = !item.checked 
				this.$set(this.list,i,item)
			},
			pickerUser(item){
				let passengerList = []
				this.list.forEach((item,i)=>{
					if(item.checked){
						passengerList.push(item)
					}
				})
				
				let prePageData = this.$tools.prePageData()
				prePageData.passenger = passengerList
				prePageData.passengerNum = passengerList.length
				prePageData.getJourneyDetail()
				uni.navigateBack({
					delta:1
				})
			},
			getList(){
				this.$api.passengerList().then(res=>{
					if(res.code==1){
						this.list = res.data
						this.list.forEach((item,i)=>{
							this.list[i].checked = false
						})
					}else{
						this.$tools.toast(res.msg)
					}
				})
			},
			addPassenger(){
				if(!this.$tools.verifyIDcard(this.id_num)){
					this.$tools.toast('请输入正确的身份证号码')
					return
				}
				this.$api.addPassenger({
					name:this.name,
					mobile:this.mobile,
					id_num:this.id_num,
				}).then(res=>{
					this.$tools.toast(res.msg)
					if(res.code==1){
						this.name = ''
						this.mobile = ''
						this.id_num = ''
						this.getList()
						this.addInputShow = false
					}
				})
			},
			editHandle(item){
				this.e_id = item.id
				this.e_name = item.name
				this.e_mobile = item.mobile
				this.e_id_num = item.id_num
				this.editShow = true
			},
			edit(id){
				if(!this.$tools.verifyIDcard(this.e_id_num)){
					this.$tools.toast('请输入正确的身份证号码')
					return
				}
				this.$api.editPassenger({
					id:this.e_id,
					name:this.e_name,
					mobile:this.e_mobile,
					id_num:this.e_id_num,
				}).then(res=>{
					this.$tools.toast(res.msg)
					if(res.code==1){
						setTimeout(()=>{
							this.getList()
							this.editShow = false
						},1000)
					}
				})
			},
			del(id){
				uni.showModal({
					title:'提示',
					content:'确定要删除吗？',
					success: (res) => {
						if(res.confirm){
							this.$api.delPassenger({
								id
							}).then(res=>{
								this.$tools.toast(res.msg)
								if(res.code==1){
									setTimeout(()=>{
										this.getList()
									},1000)
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
	}

	.list {
		padding: 30upx;
		background: #fff;

		.item {
			background: #519D76;
			border-radius: 8upx;
			padding: 30upx;
			margin-bottom: 20upx;
			flex: 1;
			@include flex-between;
			
			.wrap{
				width: 100%;
			}

			.title {
				font-size: 30upx;
				font-weight: 500;
				color: #FFFFFF;
				opacity: 0.5;
			}

			.name {
				font-size: 30upx;
				font-weight: bold;
				color: #FFFFFF;

				.mobile {
					font-size: 26upx;
					font-weight: 400;
					color: #FFFFFF;
					opacity: 0.7;
					margin-left: 20upx;
				}
			}
		}
		.action{
			min-width: 100upx;
			text{
				color: #fff;
				padding-left: 10upx;
				font-size: 26upx;
			}
		}
	}

	.btn {
		font-size: 30upx;
		font-weight: 500;
		color: #519D76;
		width: 420upx;
		line-height: 80upx;
		border: 1upx solid #519D76;
		border-radius: 40upx;
		text-align: center;
		margin: 40upx auto 0;
	}

	.input-group {
		margin-top: 16upx;
		margin-bottom: 67upx;
		background: #fff;
		padding: 0 30upx;

		.cell {
			@include flex-between;
			padding: 20upx 0;

			.title {
				font-size: 28upx;
				font-weight: bold;
				color: #999999;
			}
		}

		.cell:not(:last-child) {
			border-bottom: 1upx solid #efefef;
		}
	}
	
	.edit-popup{
		padding: 30upx 0;
		.title-1{
			text-align: center;
			font-size: 32upx;
			font-weight: 500;
			margin-bottom: 20upx;
		}
		.input-group{
			margin-bottom: 30upx;
		}
	}
	
	/deep/ .u-checkbox-group{
		display: flex;
	}
	/deep/ .u-checkbox{
		flex: 1 !important;
		display: flex;
	}
	/deep/ .u-checkbox__label{
		display: flex;
		width: 100%;
	}
</style>
